import React from 'react';
import { Group } from '@visx/group';
import { scaleLinear } from '@visx/scale';
import { LinePath } from '@visx/shape';
import { curveMonotoneX } from '@visx/curve';

const data = [
  { x: 0, y: 10 },
  { x: 1, y: 20 },
  { x: 2, y: 30 },
  { x: 3, y: 25 },
  { x: 4, y: 35 },
];

const xScale = scaleLinear({
  domain: [0, Math.max(...data.map(d => d.x))],
  range: [0, 400],
});

const yScale = scaleLinear({
  domain: [0, Math.max(...data.map(d => d.y))],
  range: [400, 0],
});

const VisxLineChart = () => {
  return (
    <svg width={500} height={500}>
      <Group>
        <LinePath
          data={data}
          x={d => xScale(d.x)}
          y={d => yScale(d.y)}
          curve={curveMonotoneX}
          stroke="blue"
          strokeWidth={2}
        />
      </Group>
    </svg>
  );
};

export default VisxLineChart;
